﻿<!doctype html>
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<html>
<head>
  <title>paper-button</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <script src="../platform/platform.js"></script>
  <link href="../font-roboto/roboto.html" rel="import">
  <link href="../core-icons/core-icons.html" rel="import">
  <link href="paper-button.html" rel="import">
  <style shim-shadowdom>
    body {
      font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
      font-size: 14px;
      text-align: center;
      padding: 1em 2em;
      transform: translateZ(0);
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
    }
    h1 {
      margin-bottom: 2em;
    }

    section {
      display: inline-block;
      background: #f7f7f7;
      border-radius: 3px;
      width: 25%;
      text-align: center;
      margin: 1%;
      padding: 1em;
    }

    paper-button {
      margin: 1em;
      width: 10em;
    }

    paper-button.colored {
      color: #4285f4;
      fill: #4285f4;
    }

    paper-button[raisedButton].colored {
      background: #4285f4;
      color: #fff;
    }
    paper-button[raisedButton].colored.hover:hover {
      background: #3367d6;
    }
    paper-button[raisedButton].colored::shadow #ripple {
      color: #2a56c6;
    }
    paper-button[raisedButton].colored::shadow #focusBg {
      background: #3367d6;
    }

    .label {
      text-align: left;
      color: #bbb;
      font-size: 12px;
      margin-top: 2em;
    }
  </style>
</head>
<body unresolved>

  <h1>&lt;paper-button&gt;</h1>

  <section>
    <paper-button label="button"></paper-button>
    <br>
    <paper-button class="colored" label="colored"></paper-button>
    <br>
    <paper-button disabled label="disabled"></paper-button>
    <br>
    <div class="label">flat</div>
  </section>

  <section>
    <paper-button raisedButton label="button"></paper-button>
    <br>
    <paper-button raisedButton class="colored" label="colored"></paper-button>
    <br>
    <paper-button raisedButton disabled label="disabled"></paper-button>
    <br>
    <div class="label">raised</div>
  </section>

  <br>
  <br>

  <section>
    <paper-button class="hover" label="button"></paper-button>
    <br>
    <paper-button class="colored hover" label="colored"></paper-button>
    <br>
    <div class="label">flat + hover state</div>
  </section>

  <section>
    <paper-button raisedButton class="hover" label="button"></paper-button>
    <br>
    <paper-button raisedButton class="colored hover" label="colored"></paper-button>
    <br>
    <div class="label">raised + hover state</div>
  </section>

  <br>
  <br>

  <section>
    <paper-button focused label="button"></paper-button>
    <br>
    <paper-button focused class="colored" label="colored"></paper-button>
    <br>
    <div class="label">flat + focused</div>
  </section>

  <section>
    <paper-button raisedButton focused label="button"></paper-button>
    <br>
    <paper-button raisedButton focused class="colored" label="colored"></paper-button>
    <br>
    <div class="label">raised + focused</div>
  </section>

</body>
</html>
